<template>
	<view>
		<view class="box">
			<view class="titlename"><text class="redcolor">*</text>出发地点</view>
			<view class="con" @click="changeFrom">
				<view class="name color grey_color">{{order_data.departure}}</view>
				<image src="../../../static/images/cc/look.png" mode="widthFix" class="limg"></image>
			</view>
			<view class="titlename"><text class="redcolor">*</text>目的地点</view>
			<view class="con" @click="changeTo">
				<view class="name grey_color">去：{{order_data.destination}}</view>
				<image src="../../../static/images/cc/right.png" mode="widthFix" class="rimg"></image>
			</view>
			<view class="titlename"><text class="redcolor">*</text>联系人</view>
			<view class="con">
				<input type="text" class="grey_color" v-model="order_data.contact_name" placeholder="请输入联系人姓名" placeholder-class="name" />
			</view>
			<view class="titlename"><text class="redcolor">*</text>联系电话</view>
			<view class="con border0">
				<input type="number" class="grey_color" v-model="order_data.contact_phone" placeholder="请输入联系人的电话方便服务人员联系" placeholder-class="name" />
			</view>
		</view>
		<view class="bottom" @click="addOrder">
			<view class="next">立即叫车</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				order_data:{
					serv_id:1,
					departure:'',
					departure_lat:'',
					departure_lng:'',
					destination:'',
					destination_lat:'',
					destination_lng:'',
					contact_name:'',
					contact_phone:''
				},
				is_submit:false
			}
		},
		methods: {
			async addOrder(){
				if(this.is_submit){
					return;
				}
				this.is_submit = true;
				uni.showLoading({
					title: '加载中'
				});
				// 获取列表
				await uni.request({
					url: '/dispatch/home/addServOrderCar',
					data: this.order_data,
					method:"POST",
					success: res => {
						if(getCurrentPages().length>1){
							uni.navigateBack();
						}else{
							uni.redirectTo({
								url: '/pages/dispatch/releaseIndex/releaseIndex'
							});
						}
					},
					complete:()=>{
						uni.hideLoading();
						this.is_submit = false;
					}
				});	
			},
			changeTo(){
				uni.chooseLocation({
					success:  (res)=> {
						this.order_data.destination = res.address;
						this.order_data.destination_lat = res.latitude;
						this.order_data.destination_lng = res.longitude;
						console.log('位置名称：' + res.name);
						console.log('详细地址：' + res.address);
						console.log('纬度：' + res.latitude);
						console.log('经度：' + res.longitude);
					}
				});
			},
			changeFrom(){
				uni.chooseLocation({
					success:  (res)=> {
						this.order_data.departure = res.address;
						this.order_data.departure_lat = res.latitude;
						this.order_data.departure_lng = res.longitude;
						console.log('位置名称：' + res.name);
						console.log('详细地址：' + res.address);
						console.log('纬度：' + res.latitude);
						console.log('经度：' + res.longitude);
					}
				});
			},
			end() {
				uni.navigateTo({
					url: '/pages/dispatch/terminaPoint/terminaPoint'
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #f7f7f7;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
	}

	.next {
		width: 676rpx;
		height: 82rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #84BD00;
		color: #ffffff;
		border-radius: 50rpx;
		font-size: 32rpx;
	}

	.rimg {
		width: 18rpx;
	}

	.box {
		width: 750rpx;
		background-color: #ffffff;
		margin-top: 20rpx;
		display: flex;
		flex-wrap: wrap;
	}

	.titlename {
		width: 678rpx;
		margin-left: 36rpx;
		font-size: 30rpx;
		color: #3D3D3D;
		margin-top: 30rpx;
	}

	.redcolor {
		color: #FF0000;
	}

	.con {
		width: 678rpx;
		height: 120rpx;
		margin-left: 36rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #D8D8D8;
	}

	.name {
		font-size: 30rpx;
		color: #999999;
	}

	.color {
		color: #84BD00;
	}

	.limg {
		width: 44rpx;
		height: 44rpx;
	}

	.border0 {
		border: 0;
	}

	input {
		color: #84BD00;
		font-size: 30rpx;
		width: 100%;
	}

	.bottom {
		width: 750rpx;
		position: fixed;
		padding-bottom: env(safe-area-inset-bottom);
		display: flex;
		align-items: center;
		justify-content: center;
		bottom: 70rpx;
	}
	.grey_color{
		color:#333333;
	}
</style>